<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="vertical-bar-chart">
    <div style="margin-left: 15px; font-size: 1rem">要素库数据量统计</div>
    <div id="vBarChart1" class="ver-bar-chart">
      <div
        v-if="showNoData"
        style="
          width: 100%;
          height: 90%;
          font-size: 1rem;
          color: #999;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        暂无统计数据
      </div>
    </div>
  </div>
</template>

<script setup>
import * as VTable from '@visactor/vtable';
import VChart from '@visactor/vchart';
const props = defineProps(['countData']);
VTable.register.chartModule('vchart', VChart);
const showNoData = ref(true);
const CONTAINER_ID = 'vBarChart1';

let vlineInstance = null;

watch(
  () => props.countData,
  (newCountData) => {
    // 销毁旧实例
    if (vlineInstance) {
      vlineInstance.release();
    }
    if (newCountData?.dataList?.length && newCountData?.scenarioNames?.length) {
      // 重新初始化图表
      initRadar(newCountData.dataList, newCountData.scenarioNames);
      showNoData.value = false;
    } else {
      showNoData.value = true;
    }
  },
  { deep: true, immediate: true }
);

onBeforeUnmount(() => {
  vlineInstance?.release();
});

const initRadar = (dataList, scenarioNames) => {
  // 数据处理：将 dataList 转换为堆叠柱状图的格式
  const chartData = dataList.flatMap((scenarioData) => {
    const scenarioName = scenarioData.scenarioName;
    return scenarioData.dataBaseDatas.map((data) => ({
      scenario: scenarioName, // 场景名称
      dataBaseName: data.dataBaseName, // 数据库名称
      value: 1, // 数据库的数量
      dataCount: data.dataCount // 数据库的数量
    }));
  });

  // 图表配置
  const spec = {
    type: 'bar', // 堆叠柱状图
    data: [
      {
        id: 'barData',
        values: chartData
      }
    ],
    xField: 'scenario', // 横轴字段：场景名称
    yField: 'dataCount', // 纵轴字段：数量
    seriesField: 'dataBaseName', // 堆叠字段：数据库名称
    stack: true,
    label: {
      visible: true,
      offset: 10,
      formatMethod: (value, data) => {
        return {
          type: 'rich',
          text: [
            {
              text: ` ${data.dataCount === 0 ? '' : data.dataCount}`,
              fontSize: 8
            }
          ]
        };
      },
      position: 'inside',
      style: {
        fontSize: 10 // 设置字体大小
      }
    },
    tooltip: {
      // 配置 mark 图元的标题内容
      mark: {
        title: {
          value: '要素库'
        },
        content: {
          key: (datum) => datum.dataBaseName,
          value: (datum) => datum.dataCount
        }
      },
      // 配置 dimension 维度项的标题内容
      dimension: {
        title: {
          value: '要素库统计'
        },
        content: {
          key: (datum) => datum.dataBaseName,
          value: (datum) => datum.dataCount
        }
      }
    },
    legends: {
      visible: true,
      orient: 'top',
      position: 'middle',
      item: {
        label: {
          style: {
            fontSize: 8
          }
        }
      }
    },
    bar: {
      style: {
        fillOpacity: 0.9, // 填充透明度,
        width: 30 // 柱子宽度
      }
    },
    axes: [
      {
        orient: 'bottom',
        paddingInner: 0.3 // 柱子之间的间距
      },
      {
        type: 'linear',
        orient: 'left',
        label: {
          formatMethod(val) {
            return `${val / 10000}w`;
          }
        }
      }
    ]
  };

  // 初始化图表
  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderSync();
  vlineInstance = vchart;
};
</script>

<style lang="scss" scoped>
.vertical-bar-chart {
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 4px 10px rgba(218, 218, 218, 0.5);
  border-radius: 5px;
  width: 100%;
  height: 100%;
  padding: 10px;
  .ver-bar-chart {
    width: 100%;
    height: 90%;
  }
}
</style>
